<script setup>
import {reactive, ref, toRefs, watch, onMounted, defineExpose} from 'vue'

const props = defineProps({
  customdata: {
    type: Object,
    default: () => ({
      columns: [],
      data: [],
      loading: true
    }),
  },
  all: {
    type: Object,
    default: '默认值'
  },


})
const emit = defineEmits([
  "handleSizeChange",
  "handleCurrentChange",
  'handleSelectionChange',
  'rowClassName'
])

const {data, columns, loading} = toRefs(props.customdata)


const handleSizeChange = (val) => {
  let nav = Math.ceil(props.all.page / val)
  if (props.all.page > nav) {
    props.all.page = nav
  }
  emit("handleSizeChange", val)
}
/**
 * 页
 * val -- 当前条
 */
const handleCurrentChange = (val) => {
  emit("handleCurrentChange", val)
}

// 全选
const handleSelectionChange = (val) => {
  emit('handleSelectionChange', val)
}
const tableRowClassName = ({row}) =>{
  let result = ''
  emit('rowClassName',row,(val)=>{
    result=val
  })
  return result
}
const multipleTableRef = ref()
defineExpose({
  multipleTableRef
})

</script>
<template>
  <el-table
      ref="multipleTableRef"
      :data="data"
      border
      height="700"
      @selection-change="handleSelectionChange"
      empty-text="当前没有数据"
      highlight-current-row
      v-loading="loading"
      element-loading-text="数据加载中"
      :row-class-name="tableRowClassName"
      style="font-size: 19px"
  >
    <el-table-column type="selection" width="50"/>
    <template v-for="item in columns" :key="item.prop">
      <el-table-column
          v-if="item.type==='tag'"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
          align="center"
      >
        <template #default="scope">
          <slot :name="item.prop" v-bind="scope"></slot>
        </template>
      </el-table-column>
      <el-table-column
          v-else-if="item.type==='calculate'"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
          align="center"
      >
        <template #default="scope">
          <slot :name="item.prop" v-bind="scope"></slot>
        </template>
      </el-table-column>
      <el-table-column
          v-else-if="item.type==='pic'"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
          align="center"
      >
        <template #default="scope">
          <slot :name="item.prop" v-bind="scope"></slot>
        </template>
      </el-table-column>
      <el-table-column
          v-else-if="item.type==='switch'"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
          align="center"
      >
        <template #default="scope">
          <slot :name="item.prop" v-bind="scope"></slot>
        </template>
      </el-table-column>
      <el-table-column
          v-else
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
          align="center"
      />
    </template>
    <slot name="operate"></slot>
  </el-table>

  <el-pagination
      background
      layout="prev, pager, next"
      :total="props.all.total"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="props.all.limit"
      :currentPage="props.all.page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
</template>

<style scoped>
.el-table ::v-deep .warning-row {
  background: #FFA500 !important;
}
</style>